<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*,body,html{
				padding: 0;
				margin: 0;
			}
			
			#myMap{
				border:1px dashed #ccc;
				width: 500px;
				height: 500px;
				margin: 15px auto;
			}
		</style>
	</head>
	<body>
		<input type="text" id="address" placeholder="请输入要查询的地址" />
		<button id="btn">获取经纬度</button>
		<div id="myMap"></div> 
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=491d3bcc5b14f5535f30d066b4e26d9a"></script> 
		<script type="text/javascript">
			var ade = document.getElementById("address")
			var btn = document.getElementById("btn")
			
			
			var mapObj = new AMap.Map("myMap",{
				zoom:20,
				center : [116.397428, 39.90923],
				viewMode : "3D"
			})
			
			
			
			var point = new AMap.Marker({
				position : [116.397428, 39.90923],
				title : "天安门",
				icon: "./img/icon.png",
				offset : new AMap.Pixel(-18, -67),
			})
			
			var point2 = new AMap.Marker({
				position : [116.396450, 39.90923],
				title : "天安门旁边"
			})
			
			AMap.plugin("AMap.Geocoder",()=>{
				let g = new AMap.Geocoder({city : "武汉市"})
				
				btn.onclick = function(){
					console.log(1)
					g.getLocation(ade.value,(status,result)=>{
						if(status == "complete"){
							console.log(result)
							let location = result.geocodes[0].location
							
							let d = new AMap.Marker({
								position : location,
								title : "千锋H5",
								icon: "./img/icon.png",
								offset : new AMap.Pixel(-18, -67),
							})
							mapObj.add(d)
							mapObj.setCenter(location)
						}
					})
				}
			})
			
			
			mapObj.add(point)
			mapObj.add(point2)
		</script>
	</body>
</html>
